import React from 'react'
import Table from '../../../components/Table'
import 'whatwg-fetch'
import API from '../../../axios/api'
import {UserType } from '../../../utils/system-data'
import SearchBar from "../../../components/SearchBar";
import ArticleDetailList from './DetailList'
import {withRouter} from "react-router-dom";
import {inject, observer} from "mobx-react";
require('es6-promise').polyfill();


const columns = [
    { dataIndex: 'Title', title: '文章名称', width: 200,},
    { dataIndex: 'ShareCount', title: '转发总次数', width: 200,},
    { dataIndex: 'OpenCount', title: '被查看次数', width: 200,},
    { dataIndex: 'Percentage', title: '查看比例', width: 200,},
    { dataIndex: 'AddCount', title: '带来新粉丝数', width: 200,},

]
@withRouter @inject('appStore') @observer
class ArticleStatistics extends React.Component {
    constructor(props) {
        super(props)
        const {user, rudder, rudderList,defaultrudderId,defaultrudderName} = props.appStore
        let newlist = [...rudderList]
        if(newlist[0] && newlist[0].mean != '总舵'){
            newlist.unshift({
                mean: "总舵",
                value: "-"
            })
        }

        this.state = {
            user: user,
            rudder: rudder,
            rudderList: newlist,
            tData: [],
            item: {},
            loading: true,
            Page: 1,
            Pages:1,
            RudderId:defaultrudderId,
            defaultrudderName:defaultrudderName,
        }
    }

    onPageChange = (e) =>{
        this.setState({
            Page:e,
        },()=>{
            this.fetchTableData()
        })
    }

    componentWillReceiveProps(nextProps){
        let {user, rudder, rudderList, defaultrudderId,defaultrudderName} = this.props.appStore

        let newlist = [...rudderList]
        if(newlist[0] && newlist[0].mean != '总舵'){
            newlist.unshift({
                mean: "总舵",
                value: "-"
            })
        }

        this.setState({
            user: user,
            rudder: rudder,
            rudderList: rudderList,
            RudderId:defaultrudderId,
            defaultrudderName:defaultrudderName
        })

     }

    // 获取表格数据
    fetchTableData =  async (searchFields) => {
        let parms = {
            Page:this.state.Page,
            PageSize: 10,
            RudderId: this.state.RudderId
        }
        await API.getAnalyArticlePages(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data.List,
                    Pages:res.Data.Pages
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    componentDidMount() {
    
             this.fetchTableData()
    }


    tableAction = (actionKey, item) => {
        if (actionKey === 'detail') {
            this.setState({
                modalShowDetail: true,
                item: item,
            })
        }
    }

    onCancel= () =>{
        this.setState({
            modalShowDetail: false
        })
    }

    onSearch = (searchFields) => {
        this.setState({
            RudderId: searchFields.RudderId,
            Page:1
        },()=>{
            this.fetchTableData(searchFields)
        })
      
    }

    searchFields = () => {
        return [{
            title: '分舵名称',
            key: 'RudderId',
            type: 'select',
            //defaultValue: this.state.rudder.mean,
            items: () => this.state.rudderList,

        }, ]
    }

    render() {
        return (
            <div id="wrap">
                {
                    /*
                    this.state.user && this.state.user.UserRankType === UserType.ADMIN  || this.state.user.RudderId == "-" ?
                        (<SearchBar
                            onSubmit={this.onSearch}
                            fields={this.searchFields()}
                        />): ''

                        */
                }
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            action={row => [
                                { key: 'detail', name: '详情', color: 'blue', icon: 'ordered-list'},
                            ]}
                            scroll={{y: 385 }}
                            total={this.state.Pages}
                            onChange={this.onPageChange}
                            currentPage={this.state.Page}
                        />
                    </div>
                    <ArticleDetailList
                        modalKey="add"
                        visible={this.state.modalShowDetail}
                        title="详情"
                        onOk={this.onOk}
                        onCancel={this.onCancel}
                        rudderId={this.state.RudderId}
                        articleId={this.state.item.ArticleId}
                        width="70%"
                    />
                </div>
            </div>
        )
    }
}
export default ArticleStatistics
